<!--
 * Description: FD图片查看组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/10 10:51
-->

<template>
  <div class="fd-pic-view" style="min-height:200px">
    <div v-for="(item, index) in picList" :key="index" style="height:40px">
      <span style="color:#333">{{ item.pictureName }}</span>
      <span style="margin-left:10px">
        <el-link type="primary" @click="viewPic(item)">{{ $t('Base.imgPreView') }}</el-link>
      </span>
    </div>

    <el-dialog :append-to-body="true" :visible.sync="dialogTableVisible" width="50%">
      <img :src="picSrc" width="100%" />
    </el-dialog>

    <div v-if="picList.length === 0" class="empty">{{ $t('Base.empty') }}</div>
  </div>
</template>

<script>
import { idpFileDownloadByOid } from '@/api/idp/file'
export default {
  name: 'FdPicView',
  props: {
    picList: {
      type: Array,
      default: () => []
    },
    idpToken: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      picSrc: '',
      dialogTableVisible: false
    }
  },
  methods: {
    async viewPic(data) {
      const res = await idpFileDownloadByOid(
        { oid: data.pictureId },
        { token: this.idpToken, downExcelFile: true }
      )
      this.picSrc =
        'data:image/png;base64,' +
        btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      this.dialogTableVisible = true
    }
  }
}
</script>
<style lang="scss">
.fd-pic-view {
  .empty {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
